<template>
  <Vue3DraggableResizable
    :lock-aspect-ratio="true"
    :handles="['tl', 'tr', 'br', 'bl']"
    :min-width="100"
    :min-height="100"
    :x="500"
    :y="200"
    :w="640"
    :h="427"
    @drag-end="insertDragStop"
    @resize-end="insertResizeStop"
    class="drag_box"
  >
    <img style="cursor: pointer; width: 100%; height: 100%" src="/ae.jpg" @load="onImageLoad" />
  </Vue3DraggableResizable>
</template>
<script setup>
import { ref, onMounted } from "vue";

let insertImg = ref("https://s3.cn-northwest-1.amazonaws.com.cn/yinlulu-glint/upload/c14624c8-9020-4c37-803b-36ec7e4ace5e.jpg"); //插图
let insertImgHeight = ref(0); //插图高度
let insertImgWidth = ref(0); //插图宽度
let insertImgLeft = ref(0); //插图坐标
let insertImgTop = ref(105); //插图坐标

// 插图停止拖动
function insertDragStop(e) {
  console.log(e);
}
// 插图停止缩放
function insertResizeStop(e) {
  console.log(e);
}
// 通过固定插图高度为130，计算插图宽度，防止图片过大，超出屏幕
function getImg(src) {
  let img = new Image();
  img.src = src;
  img.onload = () => {
    insertImgHeight.value = 130;
    insertImgWidth.value = Math.floor((img.width * 130) / img.height);
    console.log(insertImgWidth.value);
  };
}
// 图片加载完成事件处理逻辑
function onImageLoad() {
  getImg(insertImg.value);
}
</script>
